<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<style type="text/css">
#bj{
	background: #000;
	width: 300px;
}
#div{
	background: red;
}
h1{color: white; text-align: center;}
h2{color: white; text-align: center;margin:5px;}
ul{color: white;}
li{color: white;text-align: center; list-style:none;}
h3{color: white; text-align: center; margin:0px;}
.sh{height:35px;background: red;}
.sc{height:35px;background: pink;}
.jd{height:35px;background: blue;}
</style>
<body>
<div id="bj">
	<div id="div">
	<h1>11.11</h1>
	<h2>全球好物节</h2>
	</div>
	<div>
		<h3 class="sh">生活服务</h3>
		<ul id="sh">
			<li class = "hs">特惠机票</li>
			<li class = "hs">特惠酒店</li>
			<li class = "hs">碧桂园</li>
			<li class = "hs">绿植园艺</li>
		</ul>
		<h3 class="sc">海鲜水产</h3>
		<ul id="sc">
			<li class="cs">水果爆品</li>
			<li class="cs">自有品牌</li>
			<li class="cs">中国特产</li>
			<li class="cs">时令生鲜</li>
		</ul>
		<h3 class="jd">品质家电</h3>
		<ul id="jd">
			<li class="dj">格力惊鸿</li>
			<li class="dj">按摩器</li>
			<li class="dj">空调好物</li>
			<li class="dj">品牌盛典</li>
		</ul>
		
	</div>
		<h3>收起导航</h3>
</div>
</body>
<script src="词库模型.js"></script>
<script type="text/javascript">
 // function $(selector){
 // 	return document.querySelectorAll(selector);
 // }
 console.log($(".hs"))
 //问题： addEventListener 为什么不兼容两个
 //js页面跳转到指定位置是什么，怎样用
// $(".sh")[0].addEventListener("click", function(){
//  	for (var i = 0; i < $(".hs").length; i++) {
//  		$(".hs")[i].style.display = "none";
//  	}
//  })
// $(".sh")[0].addEventListener("click",function(){
//  	for (var i = 0; i < $(".hs").length; i++) {
//  		$(".hs")[i].style.display = "block";
//  	}
//  })



 $(".sh")[0].onclick = function(){
 	for (var i = 0; i < $(".hs").length; i++) {
 		if ($(".hs")[i].style.display == "block") {
 		$(".hs")[i].style.display = "none";
 	}else{
 		$(".hs")[i].style.display = "block";
 	}
 	}
 }
 // $(".sh")[0].ondblclick = function(){
 // 	for (var i = 0; i < $(".hs").length; i++) {
 // 		$(".hs")[i].style.display = "block";
 // 	}
 // }


 $(".sc")[0].onclick = function(){
 	for (var i = 0; i < $(".cs").length; i++) {
 		if ($(".cs")[i].style.display == "block") {
 		$(".cs")[i].style.display = "none";
 	}else{
 		$(".cs")[i].style.display = "block";
 	}
 	}
 }
 // $(".sc")[0].ondblclick = function(){
 // 	for (var i = 0; i < $(".cs").length; i++) {
 // 		$(".cs")[i].style.display = "block";
 // 	}
 // }

 $(".jd")[0].onclick = function(){
 	for (var i = 0; i < $(".dj").length; i++) {
 		if ($(".dj")[i].style.display == "block") {
 		$(".dj")[i].style.display = "none";
 	}else{
 		$(".dj")[i].style.display = "block";
 	}
 	}
 }
 // $(".jd")[0].ondblclick = function(){
 // 	for (var i = 0; i < $(".dj").length; i++) {
 // 		$(".dj")[i].style.display = "block";
 // 	}
 // }

 console.log($("div"))
 $("h3")[3].onclick = function(){
 	if ($("div")[2].style.display == "block") {
 	$("div")[2].style.display = "none";
 	$("h3")[3].innerText = "打开导航";
 }else{
 	$("div")[2].style.display = "block";
 	$("h3")[3].innerText = "关闭导航";
 }
 }


 // $("h3")[3].ondblclick = function(){
 // 	$("div")[2].style.display = "block";
 // 	$("h3")[3].innerText = "关闭导航";
 // }
 
/*for (var i = 0; i < 4; i++) {
$(".hs")[i].style.display = "none"
$(".cs")[i].style.display = "none"
$(".dj")[i].style.display = "none"
}
$(".sh")[0].onmouseover = function(){
	for (var i = 0; i < $(".hs").length; i++) {
		$(".hs")[i].style.display = "block";
	}
}
$(".sh")[0].onmouseout = function(){
	for (var i = 0; i < $(".hs").length; i++) {
		$(".hs")[i].style.display = "none";
	}
}


$(".sc")[0].onmouseover = function(){
	for (var i = 0; i < $(".cs").length; i++) {
		$(".cs")[i].style.display = "block";
	}
}
$(".sc")[0].onmouseout = function(){
	for (var i = 0; i < $(".cs").length; i++) {
		$(".cs")[i].style.display = "none";
	}
}

$(".jd")[0].onmouseover = function(){
	for (var i = 0; i < $(".dj").length; i++) {
		$(".dj")[i].style.display = "block";
	}
}
$(".jd")[0].onmouseout = function(){
	for (var i = 0; i < $(".dj").length; i++) {
		$(".dj")[i].style.display = "none";
	}
}

/*
$("h3")[3].onmouseover = function(){	
	$("div")[2].style.display = "none";
 	$("h3")[3].innerText = "打开导航";	
}
$("h3")[3].onmouseout = function(){	
	$("div")[2].style.display = "block";
 	$("h3")[3].innerText = "关闭导航";	
}
*/
</script>
</html>